<template>
  <div class="main">
    <div element-loading-text="正在导出中"
         v-loading="loading"  >
      <el-row :gutter="20" style="margin-bottom: 10px">
        <el-col :span="6" style="display:flex;align-items: center">
          <p class="label-form"> 审核级别：</p>
          <el-radio-group @input="changeForm" v-model="isAudit" style="margin-top: 10px;margin-left: 30px">
            <el-radio :label="0">无审核</el-radio>
            <el-radio :label="1">商铺审核</el-radio>
          </el-radio-group>
        </el-col>

      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
          <p class="label-form"> 用户手机号：</p>
          <el-input v-model="queryParams.userPhone"  placeholder="请输入用户手机号"></el-input>
        </el-col>
        <el-col :span="4">
          <p class="label-form"> 车牌号：</p>
          <el-input v-model="queryParams.licensePlate"  placeholder="请输入车牌号"></el-input>
        </el-col>
        <!--      <el-col :span="4">-->
        <!--        <p class="label-form"> 状态：</p>-->
        <!--        <el-select style="width: 100%;" clearable v-model="queryParams.status" placeholder="请选择">-->
        <!--          <el-option-->
        <!--            v-for="item in messageType"-->
        <!--            :key="item.dictValue"-->
        <!--            :label="item.dictLabel"-->
        <!--            :value="Number(item.dictValue)">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <!--      </el-col>-->

        <el-col :span="4">
          <p class="label-form"> 申请类型：</p>
          <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">
            <el-option
              v-for="item in optionsType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="Number(item.dictValue)">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <p class="label-form"> 时间：</p>
          <el-date-picker
            clearable
            v-model="createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="12" >
          <p class="label-form"></p>
          <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
          <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
          <el-button type="primary" @click="downloadForm" icon="el-icon-download">导出</el-button>
          <el-button type="primary" @click="downloadForm2" icon="el-icon-download">导出</el-button>
        </el-col>
      </el-row>

    </div>

    <!--    <el-row :gutter="20" style="margin-top: 10px">-->
    <!--      <el-col :span="4">-->
    <!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table :data="tableData"
              row-key="id"
              :expand-row-keys="expandedRowKeys"
              @expand-change="handleExpand"
              border style="margin-top: 30px">

      <el-table-column prop="id" align="center" min-width="80" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="申请单号"></el-table-column>
      <el-table-column prop="userPhone" width="200"  label="用户手机号 "></el-table-column>
      <el-table-column prop="licensePlate" width="200"  label="车牌号 "></el-table-column>
      <el-table-column prop="carModel" width="200" align="center" label="轮胎信息 ">
        <template slot-scope="scope">
            <el-button icon="el-icon-view" type="primary" @click="viewTyre(scope.row)" size="mini">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" width="200"  label="安装门店 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺位置 "></el-table-column>
      <el-table-column prop="brandName" width="200"  label="轮胎品牌 "></el-table-column>
      <el-table-column prop="reply" width="200"  label="审核意见 "></el-table-column>
      <el-table-column width="200"  label="审核状态 ">
        <template slot-scope="scope">
          {{status(scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.requestTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="220" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status ===1" size="mini" type="text" icon="el-icon-check" @click="checkedOrder(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status ===1" type="text" size="mini" icon="el-icon-edit" @click="reject(scope.row)">驳回</el-button>
          <el-button v-if="scope.row.status ===4" type="text" size="mini" icon="el-icon-view" @click="viewReject(scope.row)">查看理由</el-button>
        </template>
      </el-table-column>
    </el-table>





    <el-dialog
      title="轮胎信息"
      :visible.sync="payStatus"
      width="1200px"
      :before-close="handleClosePayStatus">
      <el-table
        :data="tyreListArray"
        border
        style="width: 100%">
        <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
        <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
        <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
        <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
        <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="安装时间" min-width="180">
          <template slot-scope="scope">

            {{parseTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="轮胎位置" min-width="150">
          <template slot-scope="scope">

            {{position(scope.row.position)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否允许理赔" min-width="150">
          <template slot-scope="scope">

            {{scope.row.isReparation ===1 ? '否':'是'}}
          </template>
        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="payStatus = false">关闭</el-button>
      </span>
    </el-dialog>



    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>


  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";

import {
  exportInstallList,
  exportStoreList,
  getAuditForm,
  getDict,
  tyreInstallLogList2,
  tyreInstallRequest, updateAuditForm, updateInstallTyre,
  updateRequestStatus, updateUserCar,
  userTyreList
} from '@/api/apiFox'
import { streamFileDownload1 } from '@/utils'

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      openValue:{},
      createTime:[],
      isAudit:1,
      pager: {
        total:10
      },
      formData:{},
      form: {},
      dialogVisible: false,
      isEdit: false,
      payStatus:false,
      dialogVisibleTyre:false,
      mark: {lng: '', lat: ''},
      content:"",
      tyreListArray:[],
      materialScienceList:[],
      tyreList:[],
      tableData: [],
      queryParams:{
        pageNum:1,
        pageSize:10,
        userPhone:"",
        licensePlate:"",
        status:"",
        type:""
      },
      loading:false,
      messageType:[],
      expandedRowKeys:[],
      options: [
        {value: 0, label: '待审核'},
        {value: 1, label: '已申请'},
        {value: 3, label: '已完成'},
        {value: 4, label: '已驳回'},
      ],
      postions:[
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsType:[],
    }
  },
  created() {
    this.getDictList('apply_status')
    this.getDictList2('apply_status')
  },
  watch:{
    createTime(newValue,oldValue){
      console.log(newValue)
      if (newValue && newValue.length>0){
        this.queryParams.beginTime = parseTime(newValue[0])
        this.queryParams.endTime = parseTime(newValue[1])
      }else{
        this.queryParams.beginTime = null
        this.queryParams.endTime =null
      }
    }
  },
  mounted() {
    this.getAudit()
    this.getLists(this.queryParams)
  },
  methods: {
    downloadForm(){
      this.$prompt('请输入导出文件名', '文件导出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }) .then(({ value }) => {
        this.loading=true
        exportInstallList(this.queryParams).then(res=>{
          streamFileDownload1(res, `${value}.xlsx`)
          this.loading=false
          this.$message.success('导出成功')
        }).catch(err=>{
          this.loading=false
          this.$message.error('导出失败')
        })
        // console.log(file,1111)

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    changeForm(e){
      console.log(e)
      updateAuditForm({type:1}).then(res=>{
        this.$message.success('操作成功')
        this.isAudit = e

      })
    },
    getAudit(){
      getAuditForm(1).then(res=>{
        console.log(res)
        if(res.data){
          this.isAudit =0
        }else{
          this.isAudit = 1
        }
      })
    },
    getDictList(item){
      getDict(item).then(res=>{
        console.log(res)
        this.messageType = res
      })
    },
    getDictList2(item){
      getDict(item).then(res=>{
        this.optionsType = res
      })
    },
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        phone:"",
        status:"",
        licensePlate:"",
        type:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    parseTime,
    getLists(params) {
      tyreInstallRequest(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },

    handleExpand(row,expandedRows) {
      this.loading=true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }

      this.getTyre(row.carId)
    },

    viewTyre(item){

      tyreInstallLogList2({requestId:item.id}).then(res=>{

        this.tyreListArray = res
        this.payStatus = true
      }).catch(err=>{
        this.payStatus = false
        this.tyreListArray = []
      })

    },




    getTyre(item){
      userTyreList({carId:item}).then(res=>{
        console.log(res)
        this.tyreList = res.data
        this.loading=false
      })
    },

    addType(e){
      this.formData={}
      this.dialogVisibleTyre = true
    },

    checkedOrder(item){
      console.log(item)
      this.$confirm('是否通过当前安装请求', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateInstallTyre({id:item.id,status:3}).then(res=>{
          this.$message.success('已通过')
          this.getLists(this.queryParams)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    viewReject(row){
      this.$alert(row.reply, '驳回理由', {
        confirmButtonText: '关闭',
        callback: action => {

        }
      });

    },

    reject(row){
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        updateInstallTyre({id:row.id,status:4,reply:value}).then(res=>{
          this.$message.success('已驳回')
          this.getLists(this.queryParams)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },


    handleCloseTyre(){
      this.dialogVisibleTyre =false
    },
    handleClosePayStatus(){
      this.payStatus = false
    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    deleteTyre(item){
      console.log(item)
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已申请'
        }
        case 3: {
          return '已完成'
        }
        case 4: {
          return '已驳回'
        }

      }
    },
    requestType(val) {
      let s = this.optionsType.filter(value => {return Number(value.dictValue) === val})
      console.log(s,'request')
      if (s && s.length>0){
        return s[0].dictLabel
      }else{
        return  '暂无数据'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
.box-item{
  width: 100%;
  .title{
    font-size: 12px;
    color: #1e1e1e;
    font-weight: 600;
    margin: 0;
  }
  .title-content{
    width: 100%;
    font-size: 12px;
    color: #2c3e50;
    margin: 0;
  }
}
</style>
